import React from 'react';
import './style.css'
import ReactSwipe from 'react-swipe'
class Category extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index:0
    }
  }

  render() {
    let opt = {
      auto:2000,
      callback:function (index) {
        this.setState({
          index:index
        })
      }.bind(this)
    };
    return (
      <div>
        <ReactSwipe className="carousel" swipeOptions={opt}>
          <div>
            <ul className="flex_row flex_space_between flex_wrap">
              <li className="col-3">日本菜</li>
              <li className="col-3">SPA</li>
              <li className="col-3">结婚</li>
              <li className="col-3">学习知识</li>
              <li className="col-3">火车机票</li>
              <li className="col-3">烧烤</li>
              <li className="col-3">家具</li>
              <li className="col-3">宠物</li>
            </ul>
          </div>
          <div>
            <ul className="flex_row flex_space_between flex_wrap">
              <li className="col-3">景点</li>
              <li className="col-3">KTY</li>
              <li className="col-3">食物</li>
              <li className="col-3">健身</li>
              <li className="col-3">美发</li>
              <li className="col-3">亲子</li>
              <li className="col-3">小吃快餐</li>
              <li className="col-3">酒吧</li>
            </ul>
          </div>
          <div>
            <ul className="flex_row flex_space_between flex_wrap">
              <li className="col-3">日本菜</li>
              <li className="col-3">SPA</li>
              <li className="col-3">结婚</li>
              <li className="col-3">学习知识</li>
              <li className="col-3">火车机票</li>
              <li className="col-3">烧烤</li>
              <li className="col-3">家具</li>
              <li className="col-3">宠物</li>
            </ul>
          </div>
        </ReactSwipe>
        <div>
          <ul className="categoryIcon flex_row flex_space_center ">
            <li><span className={this.state.index === 0? 'selected':null}></span></li>
            <li><span className={this.state.index === 1? 'selected':null}></span></li>
            <li><span className={this.state.index === 2? 'selected':null}></span></li>
          </ul>
        </div>
      </div>
    )
  }
}
export default Category